<template>
	<view class="register_content">
    <view class="logo_box">
      <view>
        食谱雅集
      </view>
    </view>
    <view class="login_form_box">
      <view class="form">
        <view class="input_box">

          <input focus="true" clearable type="text" v-model="account" placeholder="请输入账号" />

        </view>
        <view class="input_box">

          <input displayable type="password" v-model="password" placeholder="请输入密码" />

        </view>
        <view class="input_box">

          <input  clearable v-model="mobile" placeholder="请输入手机号"></input>

        </view>

        <view class="registerBtn" @tap="register">
          <view >注册</view>
        </view>
        <view class="loginBtn" >
          <text  @tap="loginRequest">返回登录</text>
        </view>
      </view>
    </view>


	</view>

</template>

<script>
	import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni/uni-popup/uni-popup-dialog.vue';

	import mInput from '../../components/m-input.vue';
	import {
		register
	} from '../../api/user.js'
	export default {
		data() {
			return {
				account: '',
				password: '',
				mobile: ''
			}
		},
		methods: {
			loginRequest() {

				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			register() {
				if (this.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}

				if (this.mobile.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误'
					});
					return;
				}


				const data = {
					account: this.account,
					password: this.password,
					mobile: this.mobile
				}
				register(data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							title: '注册成功',
							icon: 'none',
						});
            setTimeout(() =>{
              uni.navigateBack({
                delta: 1
              });
            },500)
					}
				})
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			mInput
		}

	}
</script>

<style>
.register_content {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(180deg, #E9A06F 0%, #f6d365 100%);
}


.logo_box {
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: white;
  font-weight: bold;
  font-family: "楷体", serif;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;

}

.login_form_box{
  height: 70%;
  margin: 16rpx;
  padding-top: 100rpx;
  border-radius: 20rpx;

  background: rgba(255,255,255,1);
}

.form {
  padding: 0 30upx;

}

.input_box {
  width: 100%;
  border-radius: 20upx;
  height: 100rpx;
  border: 1px solid #8d8d8d;;
  box-sizing: border-box;
  padding: 0 20upx;
  margin-top: 25upx;
}
.input_box input{
  height: 100rpx;
}

.registerBtn {
  width: 100%;
  height: 90upx;
  background: #E9A06F;
  border-radius: 20upx;
  color: #ececec;
  margin-top: 50upx;
  display: flex;
  justify-content: center;
  align-items: center;

}

.loginBtn {
  text-align: end;
  color: #0060ed;
  font-size: 30upx;
  margin-top: 30upx;
}
</style>